<template>
	<div id="tmpl">
		<div class="top">商品详情{{id}}</div>
		<div id="silder">
			<silder :imgs="imgs"></silder>
		</div>
		<div id="buy">
			<h4>{{info.title}}</h4>
			<hr/>
			<p><span>市场价：<s>￥{{info.market_price}}</s></span><span class="sell">销售价：<i style="color:red">￥{{info.sell_price}}</i></span></p>
			<p class="pba">购买数量：
				<inputNumber v-on:send="getcount"></inputNumber>
				<transition name="show"
				@before-enter="beforeEnter"
				@enter="enter"
				@after-enter="afterEnter"
				>
				<div v-if="isshow" class="ball"></div>
				</transition>
			</p>
			<p>
				<mt-button type="primary" size="small" class="gou">立即购买</mt-button>　　　
				<mt-button type="danger" size="normal" @click="toshopcar">加入购物车
			</mt-button></p>
		</div>
		<div id="params">
		<p>商品参数</p>
		<hr/>
			<h4>商品货号：{{info.goods_no}}</h4>
			<h4>库存情况：{{info.stock_quantity}}</h4>
			<h4>上架时间：{{info.add_time|datefmt("Y-M-D H:m:s")}}</h4>
		</div>
		<div id="other">
		<router-link v-bind="{to:'/goods/goodsdesc/'+id}">
			<mt-button type="primary" size="large" class="tu">图文详情</mt-button>
		</router-link>
		<router-link v-bind="{to:'/goods/goodscomment/'+id}">
			<mt-button type="danger" size="large">商品评论</mt-button>
		</router-link>
		</div>

	</div>
</template>
<script>
import silder from '../subcom/silder.vue';
import {Toast}from 'mint-ui';
import common from '../../kits/common.js';
import inputNumber from '../subcom/inputNumber.vue';
import {vm,COUNTSTR} from '../../kits/vm.js';
import {setItem,valueObj} from '../../kits/localSg.js';
	export default {
		components:{
			silder,
			inputNumber
		},
		data(){
			return{
				id:0,
				imgs:[],
				info:{},
				inputNumberCount:1,
				isshow:false,
			}
		},
		created(){
			this.id=this.$route.params.id;
			this.getimgs();
			this.getinfo();
			this.getcount(this.inputNumberCount);

		},
		methods:{
			beforeEnter(el){
				el.style.transform="translate(0px,0px)";
			},
			enter(el,done){
				el.offsetWidth;
				el.style.transform="translate(-32px,315px)";
				done();
			},
			afterEnter(el){
				this.isshow = !this.isshow;
			},
			toshopcar(){
				vm.$emit(COUNTSTR,this.inputNumberCount);
				valueObj.goodsId=this.id;
				valueObj.count = this.inputNumberCount;
				setItem(valueObj);
				this.isshow=!this.isshow;
			},
			getcount(count){
				this.inputNumberCount=count;
			},
			getimgs(){
				var url=common.apidomain + '/api/getthumimages/'+this.id;
				this.$http.get(url).then(function(response){
					this.imgs = response.body.message;
				})
			},
			getinfo(){
				var url=common.apidomain + '/api/goods/getinfo/'+this.id;
				this.$http.get(url).then(function(response){
					this.info = response.body.message[0];
				})
			}
		}

	}
</script>
<style scoped>
	#silder{
		background-color: #ccc;
	}
	.top {
		width: 100%;
		text-align: center;
		background-color: #ccc;
		color: #0094ff;
	}
	#tmpl {
		padding:3px;
		border: none;
	}
	#tmpl>div {
		border: 1px solid #ccc;
		border-radius: 8px;
		margin-top: 5px;
	}
	#params {
		padding:5px;
	}
	#params p {
		font-size: 12px;
		line-height: 12px;
		margin: 5px 0;
	}
	#params h4 {
		font-weight: normal;
		margin-top: 12px;
		margin-left: 30px;
	}
	#buy p{
		margin-top: 10px;
		margin-left: 10px;
		font: 18px '微软雅黑';
	}
	#buy h4 {
		color:#0094ff;
		font-size: 700;
		margin-left: 10px;
	}
	.sell {
		margin-left: 40px;
	}
	#other .tu{
		margin-bottom: 20px;
	}
	.gou {
		margin-top: 7px;
	}
	.pba {
		position: relative;
	}
	.ball {
		width: 17px;
		height: 17px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		bottom: 12%;
		left: 45%;
		transition: all 1s;
		z-index: 999;
	}
	
</style>